<template>
	<view>
		<u-cell-group v-if="edit">
			<!-- 选择图片 -->
			<u-cell-item @click="show = true" hover-class='none' :arrow="false" :title="item.prompt" v-if="item.type=='image'">
				<view class="m-image" slot="label">
					<u-image :src="toImage" width="200rpx" borderRadius="10rpx" height="200rpx"></u-image>
					<u-image :src="image" error-icon="plus" width="200rpx" borderRadius="10rpx" height="200rpx">
					</u-image>
				</view>
			</u-cell-item>
			<!-- 输入文字 -->
			<u-cell-item hover-class='none' :arrow="false" :title="item.prompt" v-if="item.type=='text'">
				<view class="box" slot="label">
					<u-input @blur="outPut(text,'')" :clearable="false" v-model="text" type="textarea"
						:placeholder="item.info">
					</u-input>
				</view>
			</u-cell-item>
			<!-- 选择音频 -->
			<u-cell-item @click='clickMusic' :value="music" :title="item.prompt" v-if="item.type=='music'">
			</u-cell-item>
		</u-cell-group>
		<u-action-sheet :list="list" v-model="show" @click="chooseSheet"></u-action-sheet>
		<u-popup v-model="libshow" mode="bottom" border-radius="14" closeable>
			<view class="popup-title">{{getPlates.name}}</view>
			<scroll-view scroll-y="true" class="popup-item">
				<u-grid :col="3" v-if="getPlates.type==='image'">
					<u-grid-item @click="outPut(item.info,'')" v-for="(item,index) in platesList" :key="index">
						<u-image :src="item.info" width="230" height="300"></u-image>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
				<u-cell-group v-if="getPlates.type==='music'">
					<u-cell-item :arrow="false" v-for="(item,index) in platesList" :key="index" :title="item.name">
						<u-button @click="outPut(item.info,item.name)" plain shape="circle" slot="right-icon"
							size="mini">确定</u-button>
					</u-cell-item>
				</u-cell-group>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	const db = wx.cloud.database()
	export default {
		name: 'make-form',
		props: ['item'],
		data() {
			return {
				edit: true,
				music: '',
				image: '',
				toImage: '',
				text: '',
				list: [{
					text: '本地上传'
				}, {
					text: '素材库选择'
				}],
				show: false,
				libshow: false,
				getPlates: {
					name: '图片',
					type: 'image',
				},
				platesList: []
			}
		},
		created() {
			const val = this.item
			// 判断如果本字段不可以修改就吧false赋值给edit阻止页面渲染
			if (!val.edit) return this.edit = false
			if (val.type === 'music') this.music = val.title
			if (val.type === 'image') this.toImage = val.info
		},
		methods: {
			// 选择音乐
			clickMusic() {
				this.libshow = true
				this.getPlates = {
					type: 'music',
					name: '音乐素材'
				}
				this.plates()
			},
			// 选择图片
			chooseSheet(index) {
				if (index === 1) {
					this.libshow = true
					this.getPlates = {
						type: 'image',
						name: '图片素材'
					}
					this.plates()
				} else {
					uni.chooseImage({
						count: 1,
						success: res => {
							uni.showLoading({
								title: "上传图片…"
							})
							const timestamp = new Date().getTime()
							wx.cloud.uploadFile({
								// 指定上传到的云路径
								cloudPath: `image/${timestamp}.png`,
								// 指定要上传的文件的小程序临时文件路径
								filePath: res.tempFilePaths[0],
								success: res => {
									this.outPut(res.fileID, '')
									uni.showToast({
										title: '上传成功'
									})
								},
								fail: err => uni.showToast({
									title: "上传失败",
									icon: 'none',
									success() {
										console.log(err);
									}
								})
							})
						}
					})
				}
			},
			// popup板块选择
			plates() {
				const {
					type
				} = this.getPlates
				db.collection('wangdaun-material').where({
					type
				}).get({
					success: res => {
						this.platesList = res.data
						console.log("get", this.platesList);
					},
					fail: err => console.log(err)
				})
			},
			// 输出文字（image，music调用后传入info）
			outPut(info, name) {
				if (info.length === 0) return this.$u.toast('不填则显示默认内容')
				const {
					key,
					type
				} = this.item
				const value = {
					info,
					key
				}
				this.$emit("outPut", value)
				if (type === "image") {
					this.libshow = false
					this.image = info
				}
				if (type === "music") {
					this.libshow = false
					this.music = name
				}
			}
		},
	}
</script>

<style scoped>
	.popup-title {
		height: 80rpx;
		width: 750rpx;
		text-align: center;
		line-height: 80rpx;
		border-bottom: 2px solid #eeeeee;
	}

	.m-image {
		width: 450rpx;
		display: flex;
		justify-content: space-between;
	}

	.box {
		width: 690rpx;
	}

	.popup-item {
		height: 50vh;
	}
</style>
